<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file读取</title>
</head>
<body>
<div>
    <button onclick="readerText()">读取文件</button>
    <button onclick="readerImg()">读取图片</button>
    <button onclick="abord()">终止</button>
</div>

<div>
    <input id="filename" type="file">
    <div id="text">

    </div>
    <div>
        <img src="" alt="未添加图片" id="img">
    </div>

</div>
<script>
    function readerText() {
        var reader=new FileReader();
        var filecontent= document.getElementById("filename").files[0];
        reader.onload=function () {
            var textDom=document.querySelector("#text");
            textDom.innerHTML=this.result;
        }
        reader.readAsText(filecontent,"utf-8");
    }
    var reader=new FileReader();
    function readerImg() {
        var filecontent= document.getElementById("filename").files[0];
        reader.onload=function () {
            var textDom=document.querySelector("#img");
            textDom.src=this.result;
        }
        reader.readAsDataURL(filecontent);
    }
    function abord() {
        reader.abort();
    }

</script>
</body>
</html>